<template>
	<view class="label">
		<custom-navi :show-home="false">商户标签</custom-navi>
		<view class="label-list">
			<view v-for="(item,index) in labelType" :key='index' class="">
				<view class="label-list-title">
					{{item.tagTypeDisplay}}
				</view>
				<view class="label-list-box">
					<view v-for="(itmes,sign) in item.list" :key='sign' @click="tagBtn(index,sign)" :class="{pitchon:labelType[index].list[sign].storeUseState==1}">{{itmes.tagName}}</view>
				</view>
			</view>
		</view>
		<view class="label-saveBtn" @click="saveBtn">
			保存
		</view>
	</view>
</template>

<script>
	import {
		findAllTagByStore,
		addShopTag
	} from '../../api'
	export default {
		data() {
			return {
				shopInfo: '',
				labelData: '',
				labelType: [{
						tagType: '1',
						tagTypeDisplay: '停车信息',
						list: [],
					},
					{
						tagType: '2',
						tagTypeDisplay: '免费wifi',
						list: [],
					},
					{
						tagType: '3',
						tagTypeDisplay: '环境信息',
						list: [],
					},
					{
						tagType: '4',
						tagTypeDisplay: '其他',
						list: [],
					}
				]
			}
		},
		onLoad() {
			const _self = this
			uni.getStorage({
				key: 'shopInfo',
				success: function(res) {
					_self.shopInfo = res.data
				}
			});
			this.acquire()
			// for(var i=0;i<this.labelType.length;i++){
			// 	for(var j=0;j<this.labelData.length;j++){
			// 		if(this.labelType[i].tagType==this.labelData[j].tagType){
			// 			this.labelType[i].list.push({tagName:this.labelData[j].tagName,storeUseState:this.labelData[j].storeUseState})
			// 		}
			// 	}
			// }
			// console.log(this.labelType)
			// console.log(this.labelData)
		},
		methods: {
			async acquire() {
				let params = {
					id: this.shopInfo.id
				}
				try {
					const {
						data
					} = await findAllTagByStore(params)

					// console.log(data)
					this.labelData = data
					for (var i = 0; i < this.labelType.length; i++) {
						for (var j = 0; j < this.labelData.length; j++) {
							if (this.labelType[i].tagType == this.labelData[j].tagType) {
								// console.log(this.labelType[i].list,this.labelData[j].tagName)
								this.labelType[i].list.push({
									tagName: this.labelData[j].tagName,
									storeUseState: this.labelData[j].storeUseState,
									id:this.labelData[j].id
								})
							}
						}
					}
					console.log(this.labelType)
				} catch (err) {
					console.log(err)
					if (err.code && err.statusCode) {
						if (err.code !== 200) {
							return this.$utils.common.toast.fail(err.data.message);
						}
						return this.$utils.common.toast.fail(err.errMsg);
					}
				}
			},
			tagBtn(index, sign) {
				console.log(index, sign)
				if (this.labelType[index].list[sign].storeUseState == 2) {
					this.labelType[index].list[sign].storeUseState = 1
				} else {
					this.labelType[index].list[sign].storeUseState = 2
				}
			},
			async saveBtn(){
				let tag =[]
				for(var i=0;i<this.labelType.length;i++){
					for(var j=0;j<this.labelType[i].list.length;j++){
						if(this.labelType[i].list[j].storeUseState==1){
							tag.push(this.labelType[i].list[j].id)
						}
					}
				}
				console.log(tag)
				console.log(tag.join(','))
				let params = {
					storeId: this.shopInfo.id,
					tagId:tag.join(',')
				}
				try {
					const {
						data
					} = await addShopTag(params)
					this.$utils.common.toast.fail("修改成功");
					// console.log(data)
					setTimeout(() => {
					  return this.$utils.common.navigateBack()
					}, 1000)
				} catch (err) {
					console.log(err)
					if (err.code && err.statusCode) {
						if (err.code !== 200) {
							return this.$utils.common.toast.fail(err.data.message);
						}
						return this.$utils.common.toast.fail(err.errMsg);
					}
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.label {
		height: 100vh;
		background-color: #FFFFFF;
		&-saveBtn{
			width:686rpx;
			height:88rpx;
			background:rgba(12,212,211,1);
			opacity:1;
			margin: 0 auto;
			font-size:34rpx;
			font-family:PingFang SC;
			font-weight:500;
			line-height:88rpx;
			color:rgba(255,255,255,1);
			opacity:1;
			border-radius: 10rpx;
			text-align: center;
			margin-top: 100rpx;
		}
		&-list {
			padding: 40rpx 32rpx;

			&-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
			}

			&-box {
				padding: 2rpx 0 32rpx 0;

				view {
					display: inline-block;
					background: rgba(255, 255, 255, 1);
					border: 2rpx solid rgba(179, 179, 179, 1);
					opacity: 1;
					padding: 10rpx 14rpx;
					border-radius: 6rpx;
					margin-right: 30rpx;
					margin-top: 30rpx;
				}
				.pitchon{
					background:rgba(12,212,211,0.1);
					border:2rpx solid rgba(12,212,211,1);
					color:rgba(12,212,211,1);
				}
			}
		}
	}
</style>
